<template>
    <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
        <div style="padding:7px;background: #fff;border-radius: 4px;">
            <div class="checkbox_wrapper">
                <div class="checkbox_content">
                    <CheckboxGroup v-model="check" ref="checkgroup">
                        <Checkbox :name="item" v-for="item in full" :key=item style="margin:10px 0" ref="checkboxes"
                                  @click="handleClick(item)">
                            {{item}}
                            <template #icon="props">
                                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
                            </template>
                        </Checkbox>
                    </CheckboxGroup>
                </div>
                <div class="checkbox_btn_wrapper">
                    <div class="checkbox_btn_cancel" @click="cancel">取消</div>
                    <div class="checkbox_btn_confirm" @click="confirm">确认</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import check_icon from './img/check.svg'
    import uncheck_icon from './img/uncheck.svg'
    import {Checkbox, CheckboxGroup} from 'vant';

    export default {
        name: "CheckboxList",
        components: {
            Checkbox,
            CheckboxGroup
        },
        props: {
            fullList: Array,
            checked: {
                type: Array,
                default: function () {
                    return []
                },
                require: false
            }
        },
        data() {
            return {
                checkIdx: [],
                full: [],
                check: [],
                activeIcon: check_icon,
                inactiveIcon: uncheck_icon,
            }
        },
        methods: {
            confirm() {
                if (this.check.length < 1) {
                    return
                }
                let idx = []
                this.check.forEach(item => {
                    let index = this.full.indexOf(item)
                    if (index != -1) {
                        idx.push(index)
                    }
                })
                this.$emit('confirm', this.check, idx)
            },
            cancel() {
                this.$emit('cancel')
            },
            handleClick(item) {
                if (item == '无'  && this.check.includes('无')) {
                    this.check = ["无"]
                } else if (this.check.includes('无')) {
                    this.check.splice(this.check.indexOf("无"), 1)
                } else if (item == '其他'  && this.check.includes('其他')) {
                    this.check = ["其他"]
                } else {
                    if (this.check.includes('其他') ) {
                        this.check.splice(this.check.indexOf("其他"), 1)
                    }
                }
            }
        },
        mounted() {
            this.full = this.fullList
            this.check = this.checked
        },
        watch: {
            fullList(newval, oldval) {
                this.full = newval
            },
            'check': {
                deep: true,
                handler(newval, oldval) {

                }


            },
            checked(newval, oldval) {
                this.check = newval
            },
        }
    }
</script>

<style scoped>
    .checkbox_wrapper {
        background-color: #fff;
        padding: 10px;
        min-width: 250px;
        max-height: 384px;
    }

    .checkbox_content {
        /*max-height: 360px;*/
    }

    .checkbox_btn_wrapper {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        color: #fff;
        font-size: 16px;
        justify-content: space-around;
        padding-bottom: 10px;
    }

    .checkbox_btn_cancel {
        width: 121px;
        height: 36px;
        background-color: #ACB318;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .checkbox_btn_confirm {
        width: 121px;
        height: 36px;
        background-color: #454592;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
</style>